<template>
<div>
   <router-link to="/layout/order">
  <div style="font-weight:bold;font-size:18px;line-height:60px;margin-left:30px" class="biaoti"><img src="../../../assets/shugang.png" alt="">&emsp;待办事项</div>
  </router-link>
 <div id="daiban" style="width:100%;height:200px;"></div>
</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
      return{}
    },
     mounted(){
      this.initEchart()
   },
    methods:{
       initEchart(){
           var myecart = echarts.init(document.getElementById('daiban'))
           myecart.setOption({
             tooltip: { trigger: "item", },
             series: [
              {
                type: "pie",
                radius: ["56%", "70%"],
                center: ["17%", "50%"],
                label: {
                  position: "center",
                  formatter: "{total|" + 12 + "}" + "\n\r" + "{active|待付款订单}",
                  rich: {
                    total: {
                      color: '#5087FC',
                      fontSize: 40,
                    },
                    active: {
                      fontSize: 14,
                      lineHeight: 16,
                    },
                  },
                },
                data: [
                  { value: 12, name: "待付款订单", itemStyle: { color: "#5087FC" } },
                  { value: 36, name: "", itemStyle: { color: "#F1F1F1" } },
                ],
              },
    
              {
                type: "pie",
                radius: ["56%", "70%"],
                center: ["50%", "50%"],
                label: {
                  position: "center",
                  formatter:
                    "{total|" + 20 + "}" + "\n\r" + "{active|待确认订单}",
                  rich: {
                    total: {
                      fontSize: 40,
                      color: "#E9667D",
                    },
                    active: {
                      fontSize: 14,
                      lineHeight: 16,
                    },
                  },
                },
                data: [
                  { value: 20, name: "待确认订单", itemStyle: { color: "#E9667D" } },
                  { value: 40, name: "", itemStyle: { color: "#F1F1F1" } },
                ],
              },
              {
                type: "pie",
                radius: ["56%", "70%"],
                center: ["83%", "50%"],
                label: {
                  position: "center",
                  formatter: "{total|" + 10 + "}" + "\n\r" + "{active|待回复客户}",
                  rich: {
                    total: {
                      fontSize: 40,
                      color: "orange",
                    },
                    active: {  
                      fontSize: 14,
                      // color: "#36A6F8",
                      lineHeight: 16,
                    },
                  },
                },
                data: [
                  { value: 10, name: "待回复客户", itemStyle: { color: "#FBC144" } },
                  { value: 40, name: "", itemStyle: { color: "#F1F1F1" } },
                ],
              },
        ],
      });
    }
  }
}

</script>

<style>
  img{
     transform: translateY(2px);
  }
  .biaoti:hover{
      color:#558BFD
     }
</style>